<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    <link rel="stylesheet" href="../css/登录注册.css">
</head>

<body>
    <!-- 弹窗-->
    <div id="window">登录成功</div>
    <div class="page">
        <!--注册页面-->
        <div class="reg-left" id="regx1">
            <!--圆圈-->
            <div class="circle cir-big"></div>
            <div class="circle cir-small"></div>
            <h2>Welcome Back!</h2>
            <p>已经有账号了嘛，去登录账号来进入奇妙世界吧！！！</p>
            <button id="go-login">去登录</button>
        </div>
        <div class="reg-right" id="regx2">
            <h2>注册账号</h2>
            <input type="text" placeholder="Username" id="username">
            <p id="shuname">账号为5-8位的小写字母</p>
            <input type="password" placeholder="Password" id="password">
            <p id="shupass">密码为6-16位的大小写字母、数字</p>
            <input type="password" placeholder="Confirm password" id="confirm">
            <p id="shucon">输入密码不一致</p>
            <button id="register">注册</button>
        </div>
        <!--登录页面-->
        <div class="login-left" id="logx1">
            <h2>登录账号</h2>
            <input type="text" placeholder="Username" id="userd">
            <input type="password" placeholder="Password" id="passd">
            <button id="login">登录</button>
        </div>
        <div class="login-right" id="logx2">
            <!--圆圈-->
            <div class="circle cir-big"></div>
            <div class="circle cir-small"></div>
            <h2>Hello Friend!</h2>
            <p>去注册一个账号，登录系统，让我们踏入奇妙旅途！！！</p>
            <button id="go-reg">去注册</button>
        </div>
    </div>
    <script>
        // $ = (selector) => {
        //     return document.querySelector(selector)
        // }
        function $(selector) {
            return document.querySelector(selector)
        }
        var _gologin = $('#go-login')
        var _goreg = $('#go-reg')
        var _logx1 = $('#logx1')
        var _logx2 = $('#logx2')
        var _regx1 = $('#regx1')
        var _regx2 = $('#regx2')

        // 跳转动画
        window.onload = function () {
            animationlogin = () => {
                return (_logx1.style.left = '0',
                    _logx2.style.right = '0',
                    _regx1.style.left = '-380px',
                    _regx2.style.right = '-580px')
            }
            _gologin.addEventListener('click', function () {
                animationlogin()
            })
            animationreg = () => {
                _logx1.style.left = '-580px'
                _logx2.style.right = '-380px'
                _regx1.style.left = '0'
                _regx2.style.right = '0'
            }
            animationreg()
            _goreg.addEventListener('click', function () {
                animationreg()
            })
        }


        // 封装弹窗
        const _window = $('#window')
        win = (con) => {
            _window.style.top = '20px'
            _window.style.opacity = '1'
            _window.innerText = con;
            setTimeout(function () {
                _window.style.top = '-50px'
                _window.style.opacity = '0'
            }, 1300)
        }

        // 注册
        const _username = $('#username')
        const _password = $('#password')
        const _confirm = $('#confirm')
        const _register = $('#register')

        // 正则
        var zzname = /^[a-z]{5,8}$/
        var zzpass = /^\w{6,16}$/

        var _shuname = $('#shuname')
        var _shupass = $('#shupass')
        var _shucon = $('#shucon')
        // 失去焦点事件
        _username.oninput = function () {
            if (zzname.test(_username.value)) {
                _shuname.style.color = 'transparent'
            } else {
                _shuname.style.color = 'red'
            }
        }
        _password.oninput = function () {
            if (zzpass.test(_password.value)) {
                _shupass.style.color = 'transparent'
            } else {
                _shupass.style.color = 'red'
            }
        }
        _confirm.oninput = function () {
            if (_password.value == _confirm.value) {
                _shucon.style.color = 'transparent'
            } else {
                _shucon.style.color = 'red'
            }
        }


        var userarr = localStorage.getItem('users') || '[]'
        userarr = JSON.parse(userarr)
        _register.addEventListener('click', function () {
            if (_username.value == '' || _password.value == '' || _confirm.value == '') {
                win('账号、密码不能为空')
                return;
            }
            if (zzname.test(_username.value) && zzpass.test(_password.value) && _password.value == _confirm.value) {
                var userobj = {
                    username: _username.value,
                    password: _password.value,
                    confirm: _confirm.value
                }
                for (var i = 0; i < userarr.length; i++) {
                    if (userarr[i].username == _username.value) {
                        win('账号重复')
                        return;
                    }
                }
                userarr.push(userobj)
                localStorage.setItem('users', JSON.stringify(userarr))
                animationlogin()
                _username.value = ''
                _password.value = ''
                _confirm.value = ''
                win('注册成功')
            } else {
                win('输入不合法')
            }

        })



        // 登录
        const _userd = $('#userd')
        const _passd = $('#passd')
        const _login = $('#login')

        _login.addEventListener('click', function () {
            if (_userd.value == '' || _passd.value == '') {
                win('账号、密码不能为空')
                return;
            }
            var bool = false;
            for (var i = 0; i < userarr.length; i++) {
                if (_userd.value == userarr[i].username && _passd.value == userarr[i].password) {
                    bool = true;
                    break;
                }
            }
            if (bool) {
                win('登录成功')
                //设置cookie失效时长
                let date = new Date();
                date.setTime(date.getTime() + 30 * 60 * 1000);
                document.cookie = "username=" + username + ";expires=" + date.toUTCString();
                setTimeout(function () {
                    window.location.href = '../html/首页.html'
                }, 1500)
            } else {
                win('账号或密码错误')
            }
        })
    </script>
</body>

</html>